<template>
    <div>
        <aside id="aside">
            <ul id="asideUl">
                <router-link to="/index" tag="li">首页</router-link>
                <li id="lilist" @mouseenter="enter" @mouseleave="leave">
                    课程分类<a-icon type="down" />
                    <ul id="lilistul" ref="ha">
                        <li v-for="(item,index) in array" :key="index">{{item.subjectTitle}}</li>
                    </ul>
                </li>
                <li>专属课程</li>
            </ul>
        </aside>
    </div>
</template>

<script>
    export default {
        name: "Tap",
        data(){
            return{
                array:[]
            }
        },
        created() {
            this.$axios.post('http://wkt.myhope365.com/weChat/applet/subject/list',{enable:1}).then(res=>{
                this.array = res.data.rows;
            }).catch(err=>{
                console.log(err);
            })
        },
        methods: {
            enter(){
                this.$refs.ha.style.display = "block"
            },
            leave(){
                this.$refs.ha.style.display = "none"
            }
        }
    }
</script>

<style scoped>
    #asideUl {
        height: 30px;
        margin-bottom: 5px;
    }
    /deep/#asideUl>li {
        float: left;
        margin: 0 15px;
        height: 30px;
        font-size: 16px;
    }
    #lilist {
        position: relative;
    }
    #lilistul{
        position: absolute;
        background-color: white;
        display: none;
        z-index: 10;
    }
    #lilistul>li {
        width: 150px;
        padding: 10px;
    }
    #lilistul>li:hover {
        background-color: rgba(0,207,140,0.2);
        cursor:pointer;
    }
    /deep/#asideUl>li:hover {
        color: rgb(0,207,140);
        cursor:pointer;
    }
    #lilistul {
        color: black;
    }
</style>